<template>
  <a-card>
    <template #title>
      <span style="font-weight: 700">系统总览</span>
    </template>
    <div class="statistics">
      <div class="statistics-item">
        <p class="statistics-title">学院总数：{{ statisticsInfo?.xyCount || '0' }} </p>
        <div ref="xytjEchart" class="w-full h-[200px]"> </div>
      </div>
      <div class="statistics-item">
        <p class="statistics-title">科目总数：{{ statisticsInfo?.kmCount || '0' }}</p>
        <div ref="kmtjEchart" class="w-full h-[200px]"> </div>
      </div>

      <div class="statistics-item">
        <p class="statistics-title">考生统计：{{ statisticsInfo?.bkCount || '0' }}</p>
        <div ref="kstjEchart" class="w-full h-[200px]"> </div>
        <!-- {{ statisticsInfo?.qkCount || '0' }}：{{ statisticsInfo?.ysmCount || '0' }} -->
      </div>
      <div class="statistics-item">
        <p class="statistics-title">试题统计</p>
        <div ref="sttjEchart" class="w-full h-[200px]"> </div>
        <!-- {{ statisticsInfo?.qkCount || '0' }}：{{ statisticsInfo?.ysmCount || '0' }} -->
      </div>
    </div>
  </a-card>

  <a-card class="!mt-4">
    <template #title>
      <span style="font-weight: 700">异常信息统计</span>
    </template>
    <div class="statistics">
      <err-tool :zpDataFlag="false" />
      <err-tool :zpDataFlag="true" />
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const statisticsInfo = ref<any>({})
import { getStatisticsInfo, getSummaryStInfo, getSummaryKsInfo } from '/@/api/teacher'
import errTool from './errTool.vue'
import * as echarts from 'echarts'
const kstjEchart = ref<any>()
const sttjEchart = ref<any>()
const kmtjEchart = ref<any>()
const xytjEchart = ref<any>()
const kmtjChart = ref<any>()
const xytjChart = ref<any>()
const kstjChart = ref<any>()
const sttjChart = ref<any>()

const label = {
  alignTo: 'edge',
  formatter: '{name|{b}}\n{time|{c}人}',
  minMargin: 5,
  edgeDistance: 10,
  lineHeight: 15,
  rich: {
    time: {
      fontSize: 15,
      color: '#333',
    },
  },
}

const label1 = {
  alignTo: 'edge',
  formatter: '{name|{b}}\n{time|{c}题}',
  minMargin: 5,
  edgeDistance: 10,
  lineHeight: 15,
  rich: {
    time: {
      fontSize: 15,
      color: '#333',
    },
  },
}
let data1 = [
  {
    value: 0,
    name: '录入试卷',
  },
  {
    value: 0,
    name: '试评',
  },
  {
    value: 0,
    name: '试评终止',
  },
  {
    value: 0,
    name: '试评阅完成',
  },
  {
    value: 0,
    name: '正评中',
  },
  {
    value: 0,
    name: '正评完成',
    itemStyle: { color: '#059669' },
  },
]
let data2 = [
  {
    value: 0,
    name: '未评阅',
    itemStyle: { color: '#cccccc' },
  },
  {
    value: 0,
    name: '评阅中',
    itemStyle: { color: '#4ade80' },
  },
  {
    value: 0,
    name: '评阅完成',
    itemStyle: { color: '#16a34a' },
  },
]
let data3 = [
  {
    value: 0,
    name: '实考人',
  },
  {
    value: 0,
    name: '缺考人',
    itemStyle: { color: '#cccccc' },
  },
]

let data4 = [
  {
    value: 0,
    name: '未评阅',
    itemStyle: { color: '#cccccc' },
  },
  {
    value: 0,
    name: '评阅中',
    itemStyle: { color: '#4ade80' },
  },
  {
    value: 0,
    name: '评阅完',
    itemStyle: { color: '#16a34a' },
  },
]

let data5 = [
  {
    value: 0,
    name: '未评阅',
    itemStyle: { color: '#cccccc' },
  },
  {
    value: 0,
    name: '评阅中',
    itemStyle: { color: '#4ade80' },
  },
  {
    value: 0,
    name: '评阅完',
    itemStyle: { color: '#16a34a' },
  },
]

let data6 = [
  {
    value: 0,
    name: '未评阅',
    itemStyle: { color: '#cccccc' },
  },
  {
    value: 0,
    name: '评阅中',
    itemStyle: { color: '#4ade80' },
  },
  {
    value: 0,
    name: '评阅完',
    itemStyle: { color: '#16a34a' },
  },
]

let option1 = {
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      type: 'pie',
      radius: '70%',
      center: ['50%', '50%'],
      data: data1,
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c}科}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 15,
            color: '#333',
          },
        },
      },
      left: '0',
      right: 0,
      top: 0,
      bottom: 0,
    },
  ],
}

let option2 = {
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      type: 'pie',
      radius: '70%',
      center: ['50%', '50%'],
      data: data2,
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c}个}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 15,
            color: '#333',
          },
        },
      },
      left: '0',
      right: 0,
      top: 0,
      bottom: 0,
    },
  ],
}

let option3 = {
  tooltip: {
    trigger: 'item',
  },
  title: [
    {
      subtext: '客观题统计',
      left: '15%',
      top: '85%',
      textAlign: 'center',
    },

    {
      subtext: '主观题统计',
      left: '65%',
      top: '85%',
      textAlign: 'center',
    },
  ],
  series: [
    {
      type: 'pie',
      radius: '60%',
      center: ['50%', '50%'],
      data: data5,
      label: label1,
      left: 0,
      right: '50%',
      top: 0,
      bottom: 0,
    },

    {
      type: 'pie',
      radius: '60%',
      center: ['50%', '50%'],
      data: data6,
      label: label1,
      left: '50%',
      right: 0,
      top: 0,
      bottom: 0,
    },
  ],
}

const option = {
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      type: 'pie',
      radius: '70%',
      center: ['50%', '50%'],
      data: data3,
      label,
      left: 0,
      right: '50%',
      top: 0,
      bottom: 0,
    },

    {
      type: 'pie',
      radius: '70%',
      center: ['50%', '50%'],
      data: data4,
      label,
      left: '50%',
      right: 0,
      top: 0,
      bottom: 0,
    },
  ],
}

onMounted(() => {
  getStatisticsInfo({}).then(res => {
    statisticsInfo.value = res.data
    data1[0].value = res.data.enteringCount || 0
    data1[1].value = res.data.testCount || 0
    data1[2].value = res.data.testBreakCount || 0
    data1[3].value = res.data.overTestCount || 0
    data1[4].value = res.data.formalCount || 0
    data1[5].value = res.data.overFormalCount || 0
    data2[0].value = res.data.xyWpyCount || 0
    data2[1].value = res.data.xyPyzCount || 0
    data2[2].value = res.data.xyPywcCount || 0
    data3[0].value = res.data.ysmCount || 0
    data3[1].value = res.data.qkCount || 0

    kmtjChart.value.setOption(option1)
    xytjChart.value.setOption(option2)
    kstjChart.value.setOption(option)
    sttjChart.value.setOption(option3)
  })

  getSummaryStInfo({}).then(res => {
    data5[0].value = res.data.stKgtWpyCount || 0
    data5[1].value = res.data.stKgtPyzCount || 0
    data5[2].value = res.data.stKgtPywcCount || 0

    data6[0].value = res.data.stZgtWpyCount || 0
    data6[1].value = res.data.stZgtPyzCount || 0
    data6[2].value = res.data.stZgtPywcCount || 0

    option3.title[0].subtext = `客观题统计:${res.data.stKgtCount || 0}题`
    option3.title[1].subtext = `主观题统计:${res.data.stZgtCount || 0}题`

    sttjChart.value.setOption(option3)
  })

  getSummaryKsInfo({}).then(res => {
    data4[0].value = res.data.ksWpyCount || 0
    data4[1].value = res.data.ksPyzCount || 0
    data4[2].value = res.data.ksPywcCount || 0
    kstjChart.value.setOption(option)
  })

  kmtjChart.value = echarts.init(kmtjEchart.value)
  xytjChart.value = echarts.init(xytjEchart.value)
  kstjChart.value = echarts.init(kstjEchart.value)
  sttjChart.value = echarts.init(sttjEchart.value)
})
</script>

<style lang="less" scoped>
.statistics {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 6px;
  .statistics-item {
    width: 49.2%;
    margin-right: 0.8%;
    margin-bottom: 0.8%;
    background: #f5f6fb;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #e6ebf5;

    .statistics-title {
      font-size: 15px;
      font-weight: 600;
      color: #3f4355;
    }

    .num {
      font-size: 17px;
      font-weight: 700;
    }

    .kmjd {
      flex-wrap: wrap;
      .num {
        font-size: 15px;
        font-weight: 600;
        display: inline-block;
        width: 33.3%;
        text-align: center;
      }
    }
  }
}
</style>
